@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply font-sans;
  }

  body {
    @apply bg-gray-900 text-white;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .hmi-button {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-900;
  }

  .hmi-button-primary {
    @apply hmi-button bg-primary-600 hover:bg-primary-500 text-white;
  }

  .hmi-button-danger {
    @apply hmi-button bg-danger-600 hover:bg-danger-500 text-white;
  }

  .hmi-button-secondary {
    @apply hmi-button bg-gray-700 hover:bg-gray-600 text-gray-200;
  }

  .status-card {
    @apply bg-gray-800/50 backdrop-blur-sm rounded-lg p-4 border border-gray-700/50;
  }

  .control-panel {
    @apply bg-gray-800/80 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 shadow-2xl;
  }

  .glass-panel {
    @apply bg-gray-800/30 backdrop-blur-md rounded-lg border border-gray-700/30;
  }

  .text-glow {
    text-shadow: 0 0 10px currentColor;
  }
}
